<style lang="less">
// @import "./home.less";
// @import "../../styles/common.less";
.content{margin-bottom: 20px;}
// .title{padding-bottom:5px;font-size:16px;color:#8196c1;font-weight: bold;}
.titConent{text-align:center;border:solid 1px #fff;padding:10px 0 20px 0;height: 210px;}
.titAll{padding:20px 0;}
.titleNum{font-size:20px;color:#2c8fd7;font-weight: bold;}
.titleDes{font-size:16px;color:#ffffff;}
</style>
<template>
  <div>
     <div style="height:80px;background:#161c4c;"></div>
     <div style="margin-top:10px;">
         <div style="background:#161c4c;padding:10px">
          <Row :gutter="16">
            <Col span="13">
              
              <!-- 左 -->
              <!-- <Card style="background:#1e2266;border:none;height:780px">
              </Card> -->
              <div  ref="chart_map" style="background:#1e2266;border:solid 1px #fff;height:760px">
                <!-- <ChartPan :value="xiaoduData"   :show='false' :radius='radius' :titleColor='titleColor' style="height: 100%"></ChartPan> -->
              </div>
            </Col>
            <!-- 右 -->
            <Col span="11">
              <Row type="flex" :gutter="16" align="top" class="code-row-bg">
                <Col span="12" class="content">
                  <div class="title">今日交易量</div>
                  <Row  type="flex" class="titConent">
                      <Col span="12" class="titAll">
                         <div class="titleNum">0</div>
                         <div class="titleDes">货源数（票）</div>
                      </Col>
                      <Col span="12" class="titAll">
                         <div class="titleNum">2</div>
                         <div class="titleDes">运单数（车次）</div>
                      </Col>
                      <Col span="12" class="titAll">
                         <div class="titleNum">0</div>
                         <div class="titleDes">承运金额（元）</div>
                      </Col>
                      <Col span="12" class="titAll">
                         <div class="titleNum">10000</div>
                         <div class="titleDes">委托金额（元）</div>
                      </Col>
                  </Row>
                </Col>
                <Col span="12" class="content">
                    <div class="title">历史货物品类分布</div>
                    <div class="titConent" >
                      <chart-pie :value="xiaoduData"  :seriesName='"餐具消毒"' :show='false' :radius='radius' :titleColor='titleColor' style="height: 225px;100%;" ></chart-pie>
                      
                    </div>
                </Col>
                <Col span="12" class="content">
                    <div class="title">本月运营质量监测</div>
                    <div class="titConent">
                      <Row style="height:100%">
                        <Col span="12" style="height:100%"> <ChartPan :value="xiaoduData"   :show='false' :radius='radius' :titleColor='titleColor' style="height:100%"></ChartPan></Col>
                        <Col span="12" style="height:100%"> <ChartPan :value="xiaoduData"   :show='false' :radius='radius' :titleColor='titleColor' style="height:100%"></ChartPan></Col>
                      </Row> 
                    </div>
                </Col>
                <Col span="12" class="content">
                    <div class="title">本月发货量排名</div>
                    <div class="titConent"></div>
                </Col>
                <Col span="12" class="content">
                    <div class="title">实时货源</div>
                    <div class="titConent"></div>
                </Col>
                <Col span="12" class="content">
                    <div class="title">交易和增长趋势</div>
                    <div class="titConent"></div>
                </Col>
              </Row>
            </Col>
          </Row>
        </div>
     </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import 'echarts/map/js/china.js';
import {ChartPie,ChartPan} from './components/index.js'
var allData = {
  citys: [
    {
      name: "上海",
      value: [121.473701, 31.230416],
      symbolSize: 12,
      itemStyle: { normal: { color: "red" } }
    },
    {
      name: "沈阳",
      value: [123.431475, 41.805698],
      symbolSize: 2,
      itemStyle: { normal: { color: "#F58158" } }
    },
   
    {
      name: "四川",
      value: [104.075931, 30.651652],
      symbolSize: 10,
      itemStyle: { normal: { color: "#F58158" } }
    },
    {
      name: "内蒙古",
      value: [111.765618, 40.817498],
      symbolSize: 10,
      itemStyle: { normal: { color: "#F58158" } }
    },
    {
      name: "安徽",
      value: [117.284923, 31.861184],
      symbolSize: 10,
      itemStyle: { normal: { color: "#F58158" } }
    },
    {
      name: "辽宁",
      value: [123.42944, 41.835441],
      symbolSize: 10,
      itemStyle: { normal: { color: "#F58158" } }
    }
  ],
  moveLines: [
    {
      fromName: "沈阳",
      toName: "上海",
      coords: [
        [123.431475, 41.805698],
        [121.473701, 31.230416]
      ]
    },
    {
      fromName: "四川",
      toName: "上海",
      coords: [
        [104.075931, 30.651652],
        [121.473701, 31.230416]
      ]
    },
    {
      fromName: "内蒙古",
      toName: "上海",
      coords: [
        [111.765618, 40.817498],
        [121.473701, 31.230416]
      ]
    },
    {
      fromName: "安徽",
      toName: "上海",
      coords: [
        [117.284923, 31.861184],
        [121.473701, 31.230416]
      ]
    },
    {
      fromName: "辽宁",
      toName: "上海",
      coords: [
        [123.42944, 41.835441],
        [121.473701, 31.230416]
      ]
    }
  ]
};


export default {
  name: "chinaMap",
  components: {
      ChartPie,
      ChartPan
  },
  data() {
    return {
      myChart: "",
      xiaoduData: [
                    { value: 28, name: '早上', itemStyle: {color: '#ffcc00'}},
                    { value: 41, name: '中午', itemStyle: {color: '#ff6600'} },
                    { value:45, name: '晚上', itemStyle: {color: '#32ccfe'} },
                    { value:35, name: '半夜', itemStyle: {color: '#36b0ea'} },
                ],
      titleColor:'#fff',//饼图标题颜色
    };
  },
  mounted() {
    let this_ = this;
    this_.myChart = echarts.init(this.$refs.chart_map);
    let option = {
      title: {
        text: "",
        left: "center",
        textStyle: {
          color: "#fff"
        }
      },
      legend: {
        show: false,
        orient: "vertical",
        top: "bottom",
        left: "right",
        data: ["地点", "线路"],
        textStyle: {
          color: "#fff"
        }
      },
      geo: {
        map: "china",
        label: {
          emphasis: {
            show: false
          }
        },
        roam: true,
        itemStyle: {
          normal: {
            areaColor: "rgba(7,21,57,0.5)",
            borderColor: "#0177ff"
          },
          emphasis: {
            areaColor: "#071537" //鼠标指上市时的颜色
          }
        }
      },
      series: [
        {
          name: "地点",
          type: "effectScatter",
          coordinateSystem: "geo",
          zlevel: 2,
          rippleEffect: {
            brushType: "stroke"
          },
          label: {
            emphasis: {
              show: true,
              position: "right",
              formatter: "{b}"
            }
          },
          symbolSize: 2,
          showEffectOn: "render",
          itemStyle: {
            normal: {
              color: "#46bee9"
            }
          },
          data: allData.citys
        },
        {
          name: "线路",
          type: "lines",
          coordinateSystem: "geo",
          zlevel: 2,
          large: true,
          effect: {
            show: true,
            constantSpeed: 30,
            symbol: "pin",
            symbolSize: 3,
            trailLength: 0
          },
          lineStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "#91e888"
                  },
                  {
                    offset: 1,
                    color: "#91e888"
                  }
                ],
                false
              ),
              width: 1,
              opacity: 0.5,
              curveness: 0.1
            }
          },
          data: allData.moveLines
        }
      ]
    };

    this_.myChart.setOption(option);
    window.addEventListener("resize", this_.charResize, true);
  },
  methods: {
    charResize() {
      this.myChart.resize();
    }
  },
  watch: {},
  created() {},
  destroyed() {
    let this_ = this;
    window.removeEventListener("resize", this_.charResize, true);
  }
};
</script>
